@tailwind base;
@tailwind components;
@tailwind utilities;
html {
  font-size: 100px;
}

html,
body,
#root {
  height: 100%;
  margin: 0;
  padding: 0;
  // font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
  //   'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
  //   'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  font-family: 'Alimama ShuHeiTi';
}

.ant-layout {
  min-height: 100vh;
}
.greenR{
  width:0.16rem;
  margin-left: 0.08rem;
  height:0.16rem;
  background:rgba(0,128,0,0.3);
  position: relative;
  border-radius: 50%;
  .greenRN{
    width:0.08rem;
    height:0.08rem;
    background:rgba(0,128,0,1);
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgb(0, 128, 0);
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
}
.yellowR{
  width:0.16rem;
  margin-left: 0.08rem;
  height:0.16rem;
  background:rgba(255,255,0,0.3);
  position: relative;
  border-radius: 50%;
  .yellowRN{
    width:0.08rem;
    height:0.08rem;
    background:rgba(255,255,0,1);
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgb(255,255,0);
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
}
.redR{
  width:0.16rem;
  margin-left: 0.08rem;
  height:0.16rem;
  background:rgba(255,0,0,0.3);
  position: relative;
  border-radius: 50%;
  .redRN{
    width:0.08rem;
    height:0.08rem;
    background:rgba(255,0,0,1);
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgb(255,0,0);
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
}
.grayR{
  width:0.16rem;
  margin-left: 0.08rem;
  height:0.16rem;
  background:rgba(153, 153, 153,0.3);
  position: relative;
  border-radius: 50%;
  .grayRN{
    width:0.08rem;
    height:0.08rem;
    background:rgba(153, 153, 153,1);
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgb(153, 153, 153);
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
}
.graysR{
  width:0.16rem;
  margin-left: 0.08rem;
  height:0.16rem;
  background:rgba(128, 128, 128,0.3);
  position: relative;
  border-radius: 50%;
  .graysRN{
    width:0.08rem;
    height:0.08rem;
    background:rgba(128,128,128,1);
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgb(128,128,128);
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
}

.ant-pro-sider.ant-layout-sider.ant-pro-sider-fixed {
  left: unset;
}

body {
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul,
ol,
p {
  list-style: none;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: 'Alimama ShuHeiTi';
  src: url('@/assets/font/Alimama_ShuHeiTi_Bold.woff2');
}

@font-face {
  font-family: AlibabaPuHuiTixiti;
  src: url('@/assets/font/AlibabaPuHuiTi-xiti.woff2') format('woff2'),
    url('@/assets/font/AlibabaPuHuiTi-xiti.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

#root {
  // height: 100vh;
  // position: relative;
  // // background: #111923;
  // background: #fff;
  // color: #fff;
  // overflow: hidden;
}
//  #root{
//   font-family: Alimama ShuHeiTi;
//  }

// // 定义全局变量
// @background-color: #f3f3f3;
// @text-color: #555;

// @chart-text-color: #697682;

// 改变antd-Datepicker弹出框样式

.ant-picker-input {
  & > input {
    text-align: right !important;
  }
}

.ant-picker-header {
  & > button {
    color: rgba(255, 255, 255, 45%) !important;
  }

  & > .ant-picker-header-view {
    button {
      color: rgba(255, 255, 255, 88%) !important;
    }
  }
}

.ant-picker-cell {
  color: rgba(255, 255, 255, 20%) !important;
}

.ant-picker-cell-in-view {
  color: rgba(255, 255, 255, 88%) !important;
}

.ant-picker-panel-container {
  background: #15273c !important;
}
// 改变antd-Datepicker样式 end
.tab-box-content {
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE10+ */
  &::-webkit-scrollbar {
    display: none; /* ChromeSafari */
  }
}
.main-box-flex-contain{
  height: 100%;
}
.tab-box-contentss {
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  // font-size: 0.875rem;
  // line-height: 1.25rem;
  // border-bottom-width: 1px;
  display: grid;
  grid-template-columns: 30% 45% 25%;
  text-align: left;
  align-items: center;
  // border-color: #313435;
  padding: 0.1rem 0;
  color: #bed0db;
}
// 内容容器
.main-wrapper {
  height: calc(100vh - 0.74rem);
  width: 100%;
  padding: 0.21rem 0.428rem;
  font-family: AlibabaPuHuiTixiti;
  // position: absolute;
  // border: 1px solid;
  // width: calc(100% - 1.48rem);
  // height: calc(100% - 1.55rem); // 1.15 + 0.4
  // position: absolute;
  // top: 1.15rem;
  // left: 0.74rem;
  // font-size: 0.16rem;
  // color: #fff;
  display: flex;

  .main {
    width: 4.4rem;
    height: 100%;
    // background: pink;
    // border: 1px solid #fff;

    &.main-center {
      flex: 1;
      // padding: 0.49rem 0.41rem;
      box-sizing: border-box;
      margin: 0 0.517rem;

      .main-center-menu {
        height: 0.73rem;
        margin-bottom: 0.24rem;
        // margin-top: 0.24rem;
        
      }

      .main-center-menu2 {
        height: 38.7%;
      }

      .main-center-video {
        height: 3.49rem;
        overflow: hidden;
        // height: 64.7%;

        box-sizing: border-box;
      }

      .main-center-video2 {
        height: 63.3%;
        // height: 66.65%;
        padding: 0 0 0.81rem;
        box-sizing: border-box;
      }

      .main-center-lunbo {
        margin-top: 0.4rem;
        width: 8.12rem;
        height: 2.48rem;

        // height: 2.78rem;
        // height: 27.5%;

        .slide {
          display: flex !important;
          font-size: 0.14rem;
          line-height: 0.14rem;
          letter-spacing: 0;
          color: #bed0db;
          margin: 0 0.01rem;
          // padding-bottom: 0.24rem;
          // padding-bottom: 2%;

          .slide-left {
            margin-right: 0.25rem;

            .slide-left-img-box {
              width: 1.4rem;
              height: 1.75rem;
              background: url('@/assets/images/bg-lun-left-b1.png') center
                no-repeat;
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: center;

              .slide-left-img {
                // margin: 0.07rem 0 0 0.22rem;
                width: 1.02rem;
                height: 1.56rem;
              }

              margin-bottom: 0.2rem;
            }

            .slide-left-font-box {
              width: 1.39rem;
              height: 0.35rem;
              background: url('@/assets/images/bg-lun-left-bt.png') center
                no-repeat;
              background-size: 100% 100%;
              line-height: 0.36rem;
              text-align: center;
              vertical-align: middle;
              font-weight: bold;
              letter-spacing: 0.04em;
            }
            // 2
            .slide-left-img-box1 {
              width: 2.45rem;
              height: 1.3rem;
              background: url('@/assets/images/bg-lun-right-b1.png') center
                no-repeat;
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: center;

              .slide-left-img1 {
                // margin: 0.22rem 0 0 0.22rem;
                width: 2.16rem;
                height: 0.78rem;
              }

              margin-bottom: 0.2rem;
            }

            .slide-left-font-box1 {
              width: 2.41rem;
              height: 0.3rem;
              background: url('@/assets/images/bg-lun-right-bt.png') center
                no-repeat;
              background-size: 100% 100%;
              line-height: 0.3rem;
              text-align: center;
              vertical-align: middle;
              font-weight: bold;
              letter-spacing: 0.04em;
            }
          }

          .sldie-right {
            line-height: 0.24rem;
            letter-spacing: 0;

            & > h5 {
              font-size: 0.16rem;
              font-weight: 500;
              line-height: 0.187rem;
              position: relative;
              padding-left: 0.27rem;

              &::before {
                content: '';
                position: absolute;
                top: 0.06rem;
                left: 0;
                width: 0.09rem;
                height: 0.09rem;
                background: url('@/assets/images/icon-lun-right.png') center
                  no-repeat;
                background-size: 100% 100%;
              }
            }

            & > p {
              text-indent: 2em;
            }
          }
        }
      }
    }

    .main-box {
      height: 33.3%;
    }

    .main-box-header {
      // position: absolute;
      // top: 0;
      // left: 0.95rem;
      width: 100%;
      height: 0.355rem;
      background: url('@/assets/images/bg-b-header.png') center no-repeat;
      background-size: 100% 100%;
      padding: 0 0.16rem 0 0.34rem;
      box-sizing: border-box;
      line-height: 0.3rem;
      letter-spacing: 0.05em;
      display: flex;
      justify-content: space-between;

      
    }
    .main-box-header1 {
      // position: absolute;
      // top: 0;
      // left: 0.95rem;
      width: 100%;
      height: 0.355rem;
      background: url('@/assets/images/bg-b-header.png') center no-repeat;
      background-size: 100% 100%;
      padding: 0 0.16rem 0 0.6rem;
      box-sizing: border-box;
      line-height: 0.3rem;
      letter-spacing: 0.05em;
      display: flex;
      justify-content: space-between;

      
    }
    .header-font {
      font-size: 0.14rem;
      font-style: italic;
    font-weight: bold;
      background: linear-gradient(180deg, #c8d7e4 -3%, #fff 100%);
      // background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      border: none;

      &.header-font-right {
        display: flex;

        .icon-down {
          width: 0.09rem;
          height: 0.05rem;
          margin: 0.11rem 0 0 0.12rem;
          background: url('@/assets/images/icon-down.png') center no-repeat;
          background-size: 100% 100%;
        }
      }

      &.header-font-type {
        font-size: 0.12rem;
        font-weight: bold;
        line-height: 0.24rem;
        letter-spacing: 0.05em;

        .type {
          margin-right: 0.02rem;
        }
      }
    }

    .main-box-contain {
      // padding: .2rem;
      // box-sizing: border-box;
      // height: 2.585rem;
      width: 100%;
      height: 23.5vh;
      // height: calc(33.3% - 0.355rem);
      // height: 33.3%;
      // height: 100%;
    }
  }
}

// 一行省略
.ellipsis1 {
  display: box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
// 两行省略
.ellipsis2 {
  display: box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
